<template>
  <div class="boxInfo">
    <!-- 表单内容 -->
    <div class="formInfo">
<!-- 头部信息  -->
      <div class="userInfo">
         <div class="headInfo clearfix">
           <div class="headText">

             <el-form ref="formData" label-width="215px" label-position="right">
               <el-row>
                 <el-col :span="13" :xs="24">
                   <el-form-item label="用户名" prop="title">
                     <el-input v-model="userInfo.name" placeholder="请输入用户名" size="small"/>
                   </el-form-item>
                   <el-form-item label="手机号" prop="title">
                     <el-input v-model="userInfo.phone" placeholder="请输入用户名" size="small" />
                   </el-form-item>
                   <el-form-item label="年龄" prop="title">
                     <el-input v-model="userInfo.age" placeholder="请输入用户名" size="small"/>
                   </el-form-item>
                   <el-form-item label="邮箱" :rules="[
                     { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                     { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                  ]">
                     <el-input v-model="userInfo.email"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="11" :xs="24" style="float: right">
                   <el-form-item label="员工照片：">
                    <RegShopImg :imgN='3' :userImage='userInfo.avatar' ref="staffPhoto"></RegShopImg>
                   </el-form-item>
                 </el-col>
               </el-row>

               <el-row>
                 <el-col :span="13" :xs="24">
                   <el-form-item label="现居地址" prop="title">
                     <el-input v-model="userInfo.address" placeholder="现居地址" size="small" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="11" :xs="24" style="float: right">
                   <el-form-item label="入职时间" prop="title">
                     <el-input v-model="userInfo.createTime" placeholder="入职时间" size="small" disabled/>
                   </el-form-item>
                 </el-col>
               </el-row>

               <el-row>
                 <el-col :span="10" :xs="24" >
                   <el-form-item label="性别" prop="title">
                     <el-radio-group v-model="userInfo.sex" size="small" >
                       <el-radio :label="1" value="1">男</el-radio>
                       <el-radio :label="0" value="0">女</el-radio>
                     </el-radio-group>
                   </el-form-item>
                 </el-col>
                 <el-col :span="10" :xs="24" style="float: right">
                   <el-form-item label="账号状态" prop="title">
                     <el-radio-group v-model="userInfo.status" size="small" >
                       <el-radio :label="0" value="0">正常</el-radio>
                       <el-radio :label="1" value="1">冻结</el-radio>
                     </el-radio-group>
                   </el-form-item>
                 </el-col>
               </el-row>

               <el-row :span="42" style="float: right">
                 <span class="textR">  </span>
                 <router-link :to="{'path':'/system/department'}" class="el-button el-button--default el-button--medium">返回</router-link>
                 <el-button type="primary" @click="updateUser()">保存更新</el-button>
               </el-row>
             </el-form>

           </div>
         </div>
      </div>
<!-- 头部信息 end  -->
    </div>
  </div>
</template>

<script>
import {isUserByPhone, updateUserInfo} from "@/api/system";

import RegShopImg from './imgUpload'  // 图片页面

export default {
  name: 'userInfo',
  components: { RegShopImg: RegShopImg},
  props: ['userInfo'],
  data() {
    return {

    }
  },
  methods: {
    updateUser(){
      updateUserInfo(this.userInfo).then(res => {
        if(res.data){
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
        }
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.el-collapse-item__arrow {
  float: left;
}
.headInfo {
  .headText {
    .el-row {
      overflow: visible;
      line-height: 36px;
      margin-bottom: 10px;
    }
  }
}
.el-collapse-item {
  position: relative;
  .infoR {
    position: absolute;
    background: #fff;
    display: inline-block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: right;
    right: -100px;
    top: 0px;
  }
}

.linkage {
  display: inline-block;
}
.textBotm {
  vertical-align: text-bottom;
}
.navInfo {
  height: auto;
  font-size: 30px;
  color: #333;
  background-color: #e4e4e4;
  text-align: center;
  border-bottom: 1px solid #333;
}
.step {
  position: fixed;
  left: 220px;
  top: 50%;
  margin-top: -150px;
  background: #fff;
  z-index: 9;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.objectTree{
  position: absolute;
  width:300px;
  z-index:999;
  border: 1px solid #dddee1;
  right: 65px;
  border-radius: 5px;
}
</style>
